﻿<common:LayoutAwarePage x:Name="pageRoot"
                        x:Class="RWSBeeldbank.GroupDetailPage"
                        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
                        IsTabStop="false"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="using:RWSBeeldbank"
                        xmlns:data="using:RWSBeeldbank.Data"
                        xmlns:common="using:RWSBeeldbank.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        mc:Ignorable="d"
                        NavigationCacheMode="Enabled">

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}"
          Name="LayoutRoot"
          DataContext="{Binding Group}"
          d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}">

        <Grid.Resources>
            <CollectionViewSource x:Key="dynamicMediaItems" />
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="340" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       Text="{Binding Title}"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Grid.Column="1" />
            <SearchBox  Grid.Column="2" 
                        x:Name="mySearchBox" 
                        FocusOnKeyboardInput="True"
                        SuggestionsRequested="SearchBoxEventsSuggestionsRequested" 
                        QuerySubmitted="SearchBoxEventsQuerySubmitted"
                        Height="35" VerticalAlignment="Bottom" Margin="0,0,40,40"  />
        </Grid>

        <!-- Horizontal scrolling grid used in most view states -->
        <GridView x:Name="itemGridView"
                  AutomationProperties.AutomationId="ItemGridView"
                  AutomationProperties.Name="Items In Group"
                  TabIndex="1"
                  Grid.Row="1"
                  Margin="0,0,0,0"
                  Padding="120,0,120,50"
                  ItemsSource="{Binding Source={StaticResource dynamicMediaItems}}"
                  ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
                  SelectionMode="None"
                  IsItemClickEnabled="True"
                  ItemClick="ItemView_ItemClick">

            <GridView.Header>
                <Grid HorizontalAlignment="Left"
                      VerticalAlignment="Top"
                      Width="250"
                      Height="500"
                      Margin="0,4,18,20">
                    <Border BorderBrush="White"
                            BorderThickness="1">
                        <Image Source="{Binding GroupImage}"
                               Width="250"
                               Stretch="Uniform"
                               VerticalAlignment="Top" />
                    </Border>
                    <StackPanel VerticalAlignment="Bottom"
                                Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"
                                Margin="1 0 1 1">
                        <TextBlock Text="{Binding Description}"
                                   Style="{StaticResource BodyTextStyle}"
                                   Margin="5,0,5,5" />
                    </StackPanel>
                </Grid>
            </GridView.Header>
            <GridView.ItemContainerStyle>
                <Style TargetType="FrameworkElement">
                    <Setter Property="Margin"
                            Value="1,0,0,6" />
                </Style>
            </GridView.ItemContainerStyle>

            <GridView.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition />
                </TransitionCollection>
            </GridView.ItemContainerTransitions>

        </GridView>

        <!-- Vertical scrolling list only used when snapped -->
        <ListView x:Name="itemListView"
                  AutomationProperties.AutomationId="ItemListView"
                  AutomationProperties.Name="Items In Group"
                  TabIndex="1"
                  Grid.Row="1"
                  Visibility="Collapsed"
                  Padding="10,0,0,60"
                  ItemsSource="{Binding Source={StaticResource dynamicMediaItems}}"
                  ItemTemplate="{StaticResource Standard80ItemTemplate}"
                  SelectionMode="None"
                  IsItemClickEnabled="True"
                  ItemClick="ItemView_ItemClick">

            <ListView.Header>
                <StackPanel>
                    <Border BorderBrush="White"
                            BorderThickness="1"
                            Margin="10,0,0,0"
                            Height="500"
                            Width="250"
                            HorizontalAlignment="Left">
                        <Image Source="{Binding GroupImage}"
                               Stretch="Uniform"
                               Height="500"
                               Width="250"
                               HorizontalAlignment="Left"
                               Margin="0" />
                    </Border>
                    <TextBlock Margin="10,20,18,30"
                               Text="{Binding Description}"
                               Style="{StaticResource BodyTextStyle}" />
                </StackPanel>
            </ListView.Header>

            <ListView.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition />
                </TransitionCollection>
            </ListView.ItemContainerTransitions>
        </ListView>

        <!-- Vertical scrolling list only used in portrait mode -->
        <!-- Standard500x130ItemTemplate -->
        <ListView x:Name="portraitListView"
                  AutomationProperties.AutomationId="ItemListView"
                  AutomationProperties.Name="Items In Group"
                  TabIndex="1"
                  Grid.Row="1"
                  Visibility="Collapsed"
                  Padding="86,0,20,60"
                  ItemsSource="{Binding Source={StaticResource dynamicMediaItems}}"
                  ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
                  SelectionMode="None"
                  IsItemClickEnabled="True"
                  ItemClick="ItemView_ItemClick">

            <ListView.Header>
                <StackPanel>
                    <Border BorderBrush="White"
                            BorderThickness="1"
                            Margin="10,0,0,0"
                            Height="500"
                            Width="250"
                            HorizontalAlignment="Left">
                        <Image Source="{Binding GroupImage}"
                               Margin="0"
                               Height="500"
                               Width="250"
                               Stretch="Uniform"
                               HorizontalAlignment="Left" />
                    </Border>
                    <TextBlock Margin="10,20,18,30"
                               Text="{Binding Description}"
                               Style="{StaticResource BodyTextStyle}" />
                </StackPanel>
            </ListView.Header>

            <ListView.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition />
                </TransitionCollection>
            </ListView.ItemContainerTransitions>

        </ListView>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
